<template>
	<view v-if="infos">
		<uni-nav-bar :fixed="true" left-icon="back" title="订单详情" @clickLeft="leftBack" background-color="#318cff" color="#fff"></uni-nav-bar>
		<view class="dfj-bg-base dfj-t-c dfj-pd-t-30 dfj-t-white dfj-f-35" style="padding-bottom: 80rpx;">
			<block v-if="infos.orderStatus == 0">
				<text class="dfj-icon icon-weibiaoti2fuzhi04 dfj-mg-r-30" style="font-size: 50rpx;"></text>
			</block>
			<block v-else-if="infos.orderStatus == 2">
				<text class="dfj-icon icon-daifahuo1 dfj-mg-r-30" style="font-size: 50rpx;"></text>
			</block>
			<block v-else-if="infos.orderStatus == 3">
				<text class="dfj-icon icon-daishouhuo dfj-mg-r-30" style="font-size: 50rpx;"></text>
			</block>
			<block v-else-if="infos.orderStatus == 4">
				<text class="dfj-icon icon-daishouhuo dfj-mg-r-30" style="font-size: 50rpx;"></text>
			</block>
			{{ infos.orderStatus | filtersState }}
		</view>
		
		<view class="dfj-mg-lr-20" style="position: relative;top: -30rpx;">
			
			<view class="dfj-bg-white dfj-mg-lr-50 dfj-bd-radius-20 dfj-flex dfj-flex-ai-c dfj-pd-30">
				<view><image style="width: 100rpx;height: auto;" mode="widthFix" src="/static/img/my/order-address.png"></image></view>
				<view class="dfj-mg-l-30 dfj-t-666">
					<view>
						<text class="dfj-f-30">{{ infos.userName }}</text>
						<text class="dfj-t-999">{{ infos.mobilePhone }}</text>
					</view>
					<view class="dfj-t-999 dfj-mg-t-20">
						{{ infos.addressDetail }}
					</view>
				</view>
			</view>
			
			<view class="dfj-bg-white dfj-bd-radius-20 dfj-mg-t-20">
				
				<view class="dfj-mg-lr-20" v-if="infos.productOrderList.length>0">
					<view class="dfj-flex dfj-flex-ai-c dfj-pd-20 dfj-t-666">
						<view class="dfj-flex-1"><text class="dfj-icon icon-shangjia dfj-mg-r-20"></text>自营</view>
						<view class="dfj-t-base"></view>
					</view>
					<block v-for="(item,index) in infos.productOrderList">
						<navigator :url="`/pages/home/details?pId=${item.productId}`">
							<view class="dfj-flex">
								<view><image :src="item.iconUrl" style="width: 180rpx;height: auto;" mode="widthFix"></image></view>
								<view class="dfj-flex-1 dfj-mg-l-25 dfj-t-666">
									<view class="dfj-f-28">{{ item.productTitle }}</view>
									<view class="dfj-mg-t-30">
										<text class="dfj-f-35 dfj-t-danger">￥{{ item.price }}</text><text class="dfj-mg-l-30">共{{ item.amount }}件</text>
									</view>
								</view>
							</view>
						</navigator>
					</block>
				</view>
				
				<!-- <view class="dfj-t-c dfj-pd-20 dfj-t-666">
					<text class="dfj-icon icon-xinbaniconshangchuan- dfj-mg-r-20"></text> 联系客服
				</view> -->
			</view>
			
			
			<view class="dfj-bg-white dfj-bd-radius-20 dfj-mg-t-20 dfj-pd-lr-20 dfj-pd-tb-20">
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-10">
					<view class="dfj-flex-1 dfj-t-666">付款方式</view>
					<view class="dfj-t-333">{{ infos.payType | filtersPayType }}</view>
				</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-10">
					<view class="dfj-flex-1 dfj-t-666">商品金额</view>
					<view class="dfj-t-333">￥{{ infos.totalPrice }}</view>
				</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-10">
					<view class="dfj-flex-1 dfj-t-666">运费</view>
					<view class="dfj-t-333">￥0.0</view>
				</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-10">
					<view class="dfj-flex-1 dfj-t-333">实付金额</view>
					<view class="dfj-t-danger">￥{{ infos.totalPrice }}</view>
				</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-10">
					<view class="dfj-flex-1 dfj-t-666">订单编号</view>
					<view class="dfj-t-333">{{ infos.orderNo }}<uni-tag text="复制" style="display: inline-block;border: 1px solid #E5E5E5;margin-left: 20rpx;" size="small" inverted="true" circle="true"></uni-tag></view>
				</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-10">
					<view class="dfj-flex-1 dfj-t-666">下单时间</view>
					<view class="dfj-t-333">{{ infos.orderTime }}</view>
				</view>
				
			</view>
			<block v-if="infos.orderStatus == 3">
				<view class="dfj-bg-white dfj-bd-radius-20 dfj-mg-t-20 dfj-pd-lr-20 dfj-pd-tb-20">
					<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-10">
						<view class="dfj-flex-1 dfj-t-666">发货时间</view>
						<view class="dfj-t-333">{{ infos.logisticsTime}}</view>
					</view>
					<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-10">
						<view class="dfj-flex-1 dfj-t-666">快递方式</view>
						<view class="dfj-t-333">{{ infos.logisticsName}}</view>
					</view>
					<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-10">
						<view class="dfj-flex-1 dfj-t-666">快递单号</view>
						<view class="dfj-t-333">{{ infos.logisticsNo}}</view>
					</view>
				</view>
				
				<view class="dfj-bg-white dfj-bd-radius-20 dfj-mg-t-20 dfj-pd-lr-20 dfj-pd-tb-20">
					<navigator :url="`/pages/my/logistics?id=${infos.id}&logisticsName=${infos.logisticsName}&logisticsTime=${infos.logisticsTime}&orderNo=${infos.orderNo}`">
						<view class="dfj-flex dfj-flex-ai-c dfj-pd-tb-10">
							<view class="dfj-flex-1 dfj-t-666">物流信息</view>
							<view class="dfj-t-333"><text class="dfj-icon icon-arrow-right"></text></view>
						</view>
					</navigator>
				</view>
			</block>
			
		</view>
		<block v-if="infos.orderStatus == 0">
			<view style="height: 100rpx;"></view>
			<view class="o_details_btn">
				<button type="default" size="mini" @click="cancelOrder()">取消订单</button>
				<button type="primary" size="mini" @click="toPay()">立即付款</button>
			</view>
		</block>
		<block v-if="infos.orderStatus == 3">
			<view style="height: 100rpx;"></view>
			<view class="o_details_btn">
				<button type="primary" size="mini" @click="makeSureGoods()">确认收货</button>
			</view>
		</block>
		
		<uni-popup ref="popup" type="bottom">
			<view class="dfj-bg-white">
				<view class="dfj-pd-30 dfj-t-c">
					<view class="dfj-t-666 dfj-f-28">请输入交易密码</view>
					<view class="dfj-pd-tb-30 dfj-f-35 dfj-t-999">支付：<text class="dfj-t-danger">￥890.0</text></view>
					<view class="code-box">
						<block v-for="(item, index) in 6" :key="index">
							<view class="code-box-item">{{ (password[index] && '●') || '' }}</view>
						</block>
					</view>
				</view>
				<view class="keyboard">
					<block v-for="(item, index) in 9" :key="index">
						<view class="keyboard-item" @tap="key(index + 1)">{{index + 1}}</view>
					</block>
					<view class="keyboard-item hide"></view>
					<view class="keyboard-item" @tap="key(0)"><text>0</text></view>
					<view class="keyboard-item delte" @tap="del()"><image style="width: 60rpx;height: auto;" mode="widthFix" src="/static/img/home/del.png" :lazy-load="true"></image></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infos: '',
				password: ''
			}
		},
		filters:{
			filtersState(val) {
				let txt;
				if(val == 0){
					txt = '待付款'
				}else if(val == 2){
					txt = '待发货'
				}else if(val == 3){
					txt = '待收货'
				}else if(val == 4){
					txt = '已完成'
				}
				return txt;
			},
			filtersPayType(val) {
				//payType;1:方糖支付 2:我的点券支付 3:赠送点券支付 4:商家点券支付 5.微信支付 6.支付宝支付 7钱包支付宝 8钱包微信 9:Vip赠送
				let txt = '未支付'
				if(val == 1){
					txt = '方糖支付'
				}else if(val == 2){
					txt = '我的点券支付'
				}else if(val == 3){
					txt = '赠送点券支付'
				}else if(val == 4){
					txt = '商家点券支付'
				}else if(val == 5){
					txt = '微信支付'
				}else if(val == 6){
					txt = '支付宝支付'
				}else if(val == 7){
					txt = '钱包支付宝'
				}else if(val == 8){
					txt = '钱包微信'
				}else if(val == 9){
					txt = 'Vip赠送'
				}
				return txt;
			}
		},
		onLoad(options) {
			this.getDetails(options.orderId)
		},
		methods: {
			leftBack() {
				uni.navigateBack();
			},
			getDetails(orderId) {
				this.$http({
					url: '/order/getOrderDetail',
					data: {
						orderId: orderId
					}
				}).then(res=>{
					this.infos = res.data;
				})
			},
			cancelOrder(){
				this.$http({
					url: '/order/cancelOrder',
					data: {
						orderId: this.infos.id
					}
				}).then(res=> {
					uni.navigateBack()
				})
			},
			toPay() {
				uni.reLaunch({
					url: `/pages/home/pay?orderNo=${this.infos.id}&orderMoney=${this.infos.totalPrice}`
				})
			},
			makeSureGoods(){
				this.$refs.popup.open()
			},
			key(key) {
				if (this.password.length < 6) {
					this.password += key;
					if (this.password.length == 6) {
						
						this.$http({
							url: '/order/confirmOrder',
							data: {
								orderId: this.infos.id,
								payPwd: this.password
							}
						}).then(res=> {
							if(res.flag){
								this.$refs.popup.close()
								uni.navigateBack()
							}else{
								this.password = ''
							}
						})
					}
				}
			},
			del() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.o_details_btn{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		padding: 20rpx;
		box-sizing: border-box;
		text-align: right;
		button{
			margin-left: 30rpx;
			vertical-align: top;
		}
	}
	.keyboard{
		background: #EBEBEB;
		display: flex;
		justify-content: center;
		z-index: 2;
		flex-wrap: wrap;
		transition:all 0.2s ease-in 0.2s;
	}
	.keyboard-item {
		box-sizing: border-box;
		width: 250rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		font-size: 40rpx;
		color: #333;
		height: 99rpx;
		border: 1rpx solid #EBEBEB;
		border-top:none;
		border-left:none;
	}
	.hide {
		opacity: 0;
	}
	.delte {
		background: none;
		box-shadow: none;
	}
	.code-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: 1px solid #d0d0d0;
	}
	.code-box-item {
		width: 86rpx;
		height: 86rpx;
		background: #fff;
		font-size: 40rpx;
		line-height: 86rpx;
		text-align: center;
		flex: 1;
		border: 1rpx solid #e5e5e5;
	}
</style>
